<template>
  <a-modal
    :title="modalOpt.modalTitle"
    centered
    :visible="modalOpt.modalVisible"
    :width="modalOpt.modalWidth"
    :destroyOnClose="true"
    :footer="footer"
    @ok="closeModal"
    @cancel="closeModal"
  >
    <div class="modal-content">
      <slot></slot>
    </div>
    <template #footer>
      <div class="btmBtn">
        <slot name="cusBtn"></slot>
        <a-button type="primary" @click="closeModal" >确定</a-button>
        <a-button type="primary" @click="closeModal" >取消</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script>

export default {
  props: {
    modalOpt:{
      type:Object
    },
    footer:{
      type:String,
      default:undefined
    }
  },
  data(){
      return{
      }
  },
  components:{
  },
  computed:{

  },
  methods:{
      closeModal(){
          this.$emit('closeModal')
      }
  }
}
</script>

<style>
.modal-content{
    width: 100%;
    max-height:70vh;
    overflow: scroll;
    /* border: 1px solid #eee; */
}
.btmBtn{
  width: 100%;
  text-align: center;
}
</style>